// ignore_for_file: avoid_redundant_argument_values, no-empty-block, avoid-missing-image-alt, prefer-define-hero-tag

import 'dart:ui';

import 'package:common/common.dart';
import 'package:common/image/ui_image_view.dart';
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:miaowu/app/module/world/world_main/world_item_widget.dart';

import 'intimate_list_page.dart';
import 'sliver_app_bar_builder.dart';

class UserCenterInfoPage extends StatefulWidget {
  const UserCenterInfoPage({super.key});

  @override
  State<UserCenterInfoPage> createState() => _UserCenterInfoPageState();
}

class _UserCenterInfoPageState extends State<UserCenterInfoPage> with TickerProviderStateMixin {
  late TabController tabController;

  @override
  void initState() {
    super.initState();

    tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: ExtendedNestedScrollView(
        headerSliverBuilder: (BuildContext c, bool f) {
          return <Widget>[
            _buildSliverAppBar(),
            SliverToBoxAdapter(
              child: Container(
                height: 77,
                color: Colors.white,
                margin: const EdgeInsets.symmetric(vertical: 5),
                alignment: Alignment.centerLeft,
                child: Container(
                    margin: const EdgeInsets.only(top: 10, bottom: 20),
                    padding: const EdgeInsets.symmetric(horizontal: 12),
                    child: Wrap(
                      crossAxisAlignment: WrapCrossAlignment.start,
                      alignment: WrapAlignment.start,
                      spacing: 5,
                      runSpacing: 5,
                      children: ['时尚达人', '喵控', '穿搭', '穿搭', '文字很长很长很长很长不够换行…', '触碰页边距不够换行的标签', '四字标签', '懒', '行走的摄影师']
                          .map((e) => Container(
                              height: 20,
                              decoration: BoxDecoration(
                                  color: const Color(0xFFE4EEFF),
                                  borderRadius: BorderRadius.all(Radius.circular(10.r))),
                              padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5), //
                              child: Text(e, style: const TextStyle(fontSize: 8, color: Color(0xFF5997FB)))))
                          .toList(),
                    )),
              ),
            ),
            SliverToBoxAdapter(
              child: Container(
                height: 77,
                margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                alignment: Alignment.center,
                padding: const EdgeInsets.symmetric(horizontal: 16),
                decoration: BoxDecoration(
                    color: const Color(0xFFEAFAFF), borderRadius: BorderRadius.all(Radius.circular(12.r))),
                child: Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(right: 10),
                      child: Image.asset('assets/app/images/user_center/user_center_gift.png', height: 32),
                    ),
                    Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('礼物展览馆',
                              style: TextStyle(color: Colors.black, fontSize: 14.sp, fontWeight: FontWeight.bold)),
                          Text.rich(
                              textAlign: TextAlign.center,
                              TextSpan(children: [
                                TextSpan(
                                    text: '已点亮 ', style: TextStyle(fontSize: 12.sp, color: const Color(0xFF000000))),
                                const WidgetSpan(child: SizedBox(width: 8)),
                                TextSpan(text: '34', style: TextStyle(fontSize: 12.sp, color: const Color(0xFF25D4D0))),
                                TextSpan(
                                    text: '/112', style: TextStyle(fontSize: 12.sp, color: const Color(0xFF999999))),
                              ]))
                        ],
                      ).onTap(() {
                        // Get.to(const GiftExhibitionHallPage());
                        Get.to(const IntimateListPage());
                      }),
                    ),
                    Row(
                      children: [
                        Text('查看ta收到的礼物', style: TextStyle(color: const Color(0xFF25D4D0), fontSize: 12.sp)),
                        Image.asset('assets/app/images/user_center/user_center_voices_play.png', height: 19),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ];
        },
        pinnedHeaderSliverHeightBuilder: () {
          final double statusBarHeight = MediaQuery.of(context).padding.top;
          return statusBarHeight + kToolbarHeight;
        },
        body: ListView.separated(
          padding: EdgeInsets.only(top: 8.h),
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            return WorldItemWidget(index: index);
          },
          separatorBuilder: (context, index) => Container(
            height: 10,
            color: const Color(0xFFF5FAF9).withOpacity(1),
          ),
        ),
        // body: Column(
        //   crossAxisAlignment: CrossAxisAlignment.start,
        //   children: [
        //     TabBar(
        //       tabAlignment: TabAlignment.start,
        //       controller: tabController,
        //       labelColor: const Color(0xFF222222),
        //       indicatorColor: Colors.black,
        //       unselectedLabelColor: const Color(0xFF222222),
        //       isScrollable: true,
        //       indicatorWeight: 0,
        //       overlayColor: WidgetStateProperty.resolveWith((states) {
        //         return Colors.transparent;
        //       }),
        //       dividerHeight: 0,
        //       indicator: ContainerTabIndicator(
        //           color: const Color(0xFF22F2EB),
        //           width: 30.w,
        //           height: 3.w,
        //           radius: const BorderRadius.all(Radius.circular(14.0)),
        //           padding: const EdgeInsets.only(left: 0.0, right: 0, top: 15, bottom: 0)),
        //       labelStyle: const TextStyle(color: Color(0xFF22F2EB), fontSize: 15, fontWeight: FontWeight.w600),
        //       unselectedLabelStyle: const TextStyle(color: Color(0xFF222222), fontSize: 15),
        //       tabs: const [
        //         Tab(text: "帖子"),
        //         Tab(text: "收藏"),
        //         Tab(text: "赞过"),
        //       ],
        //       onTap: (index) async {
        //         logs(index);
        //       },
        //     ),
        //     Expanded(
        //       child: ListView.builder(
        //         itemBuilder: (context, int index) {
        //           return Container(
        //             margin: const EdgeInsets.symmetric(vertical: 8),
        //             padding: const EdgeInsets.symmetric(horizontal: 16),
        //             child: Text(index.toString()),
        //           );
        //         },
        //         itemCount: 100,
        //       ),
        //     ),
        //   ],
        // ),
      ),
    );
  }

  SliverAppBarBuilder _buildSliverAppBar() {
    double initialContentHeight = 250;
    return SliverAppBarBuilder(
      barHeight: 60.0,
      debug: false,
      backgroundColorBar: Colors.transparent,
      backgroundColorAll: Colors.blue,
      initialBarHeight: 60.0,
      pinned: true,
      // floating: true,
      initialContentHeight: initialContentHeight,
      collapseLeadingActions: false,
      leadingActionsPadding: const EdgeInsets.symmetric(horizontal: 0.0),
      collapseTrailingActions: false,
      trailingActionsPadding: const EdgeInsets.symmetric(horizontal: 0),
      contentBelowBar: false,
      stretch: false,
      stretchConfiguration: OverScrollHeaderStretchConfiguration(
        stretchTriggerOffset: 50,
        onStretchTrigger: () {
          return Future.value();
        },
      ),
      contentBuilder: (context, expandRatio, contentHeight, centerPadding, overlapsContent) {
        return Stack(
          children: [
            SizedBox(
              child: Container(
                height: contentHeight,
                width: double.infinity,
                clipBehavior: Clip.hardEdge,
                decoration: BoxDecoration(
                    image: DecorationImage(
                  image: ExtendedNetworkImageProvider(
                      'https://oss.cloudhubei.com.cn/cms/release/set35/20241014/9ec7a083198223c49c06e3ebbf8df33c.jpg'),
                  fit: BoxFit.cover,
                )),
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                  child: Container(decoration: BoxDecoration(color: Colors.white.withOpacity(.0))),
                ),
              ),
            ),
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              height: 125,
              child: Opacity(
                opacity: expandRatio,
                child: Container(
                  padding: EdgeInsets.only(left: 16.w, top: 40),
                  decoration: BoxDecoration(
                      color: Colors.white.withOpacity(expandRatio),
                      borderRadius: BorderRadius.only(topLeft: Radius.circular(16.r), topRight: Radius.circular(16.r)),
                      image: const DecorationImage(
                          image: AssetImage('assets/app/images/user_center/user_center_top_bg.png'),
                          fit: BoxFit.cover)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Text('爱美丽',
                                  style: TextStyle(color: Colors.black, fontSize: 20.sp, fontWeight: FontWeight.bold)),
                              const SizedBox(width: 5),
                              Image.asset('assets/app/images/pond/pond_icon_vip.png', width: 30)
                            ],
                          ),
                          Container(
                              padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 5),
                              child: Text.rich(
                                  textAlign: TextAlign.center,
                                  TextSpan(children: [
                                    WidgetSpan(
                                        child: Padding(
                                      padding: const EdgeInsets.only(right: 8),
                                      child: Image.asset('assets/app/images/world/user_sex_boy.png', width: 14),
                                    )),
                                    TextSpan(
                                        text: '27岁', style: TextStyle(fontSize: 12.sp, color: const Color(0xFF000000))),
                                    const WidgetSpan(child: SizedBox(width: 8)),
                                    TextSpan(
                                        text: '射手座 · 河北张家口 · IP:北京',
                                        style: TextStyle(fontSize: 12.sp, color: const Color(0xFF999999))),
                                    WidgetSpan(
                                        child: Padding(
                                      padding: const EdgeInsets.only(left: 8),
                                      child:
                                          Image.asset('assets/app/images/user_center/user_center_tips.png', width: 14),
                                    )),
                                  ]))),
                          Container(
                            margin: const EdgeInsets.only(top: 5),
                            child: Row(
                              children: [
                                Container(
                                  height: 20.h,
                                  width: 73.w,
                                  alignment: Alignment.center,
                                  padding: const EdgeInsets.only(left: 15),
                                  margin: const EdgeInsets.only(right: 10),
                                  decoration: const BoxDecoration(
                                      image: DecorationImage(
                                          image: AssetImage('assets/app/images/user_center/user_center_tag_bg1.png'))),
                                  child: Text(
                                    '声望Lv.12',
                                    style: TextStyle(color: const Color(0xFF9548E9), fontSize: 10.sp),
                                  ),
                                ),
                                Container(
                                  height: 20.h,
                                  width: 73.w,
                                  alignment: Alignment.center,
                                  padding: const EdgeInsets.only(left: 15),
                                  decoration: const BoxDecoration(
                                      image: DecorationImage(
                                          image: AssetImage('assets/app/images/user_center/user_center_tag_bg2.png'))),
                                  child: Text(
                                    '魅力Lv.12',
                                    style: TextStyle(color: const Color(0xFFEA4B9C), fontSize: 10.sp),
                                  ),
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                      Container(
                        color: Colors.transparent,
                        width: 72,
                        height: 72,
                        child: Stack(
                          children: [
                            Image.asset('assets/app/images/user_center/user_center_voice_bg.png', width: 72),
                            Container(
                              alignment: Alignment.center,
                              padding: const EdgeInsets.only(left: 10, right: 8),
                              child: Row(
                                // mainAxisAlignment: MainAxisAlignment.spaceAround,
                                children: [
                                  Image.asset('assets/app/images/user_center/user_center_voices_play.png', width: 16),
                                  const Expanded(
                                      child: Text('11’’',
                                          textAlign: TextAlign.center,
                                          style: TextStyle(fontSize: 11, color: Colors.white))),
                                  Image.asset('assets/app/images/user_center/user_center_voice_arrow.png', width: 8),
                                ],
                              ),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
            Container(
              alignment: Alignment.centerLeft,
              height: contentHeight,
              padding: centerPadding.copyWith(left: 30 + (1 - expandRatio) * 20),
              child: Row(
                children: [
                  ImageView(
                      url:
                          'https://oss.cloudhubei.com.cn/cms/release/set35/20241014/9ec7a083198223c49c06e3ebbf8df33c.jpg',
                      height: 50 + expandRatio * 10,
                      width: 50 + expandRatio * 10,
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.white, width: 1),
                      fit: BoxFit.fill),
                  const SizedBox(width: 10),
                  Text('爱美丽',
                      style: TextStyle(
                          fontSize: 14 + expandRatio * 10,
                          color: Colors.white.withOpacity(1 - expandRatio),
                          fontWeight: FontWeight.w600)),
                ],
              ),
            ),
          ],
        );
      },
      leadingActions: [
        (context, expandRatio, barHeight, overlapsContent) => SizedBox(
              height: barHeight,
              child: const BackButton(color: Colors.white),
            ),
      ],
      trailingActions: [
        (context, expandRatio, barHeight, overlapsContent) {
          return Container(
            height: barHeight,
            alignment: Alignment.center,
            transform: Matrix4.translationValues(0, -expandRatio * barHeight, 0),
            child: Opacity(
              opacity: Tween<double>(begin: 1, end: 0).transform((expandRatio * 2).clamp(0.0, 1.0)),
              child: IconButton(
                icon: Icon(
                  Icons.lightbulb,
                  color: Color.lerp(Colors.yellow, Colors.red, expandRatio),
                ),
                onPressed: () {},
              ),
            ),
          );
        },
      ],
    );
  }
}
